<template>
  <div class="app-container">
    <div class="Top">
      <div>
        <el-button class="btn" @click="handleAdd()" type="primary" size="mini"
          >新增</el-button
        >
      </div>
      <div style="display: flex">
        <span
          style="
            width: 170px;
            line-height: 40px;
            margin-left: 200px;
            color: cadetblue;
          "
          >员工姓名:</span
        >
        <el-input
          v-model="waiter_info.realname"
          placeholder="请输入内容"
          @change="fuQuery"
        ></el-input>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="员工编号"> </el-table-column>
      <el-table-column prop="realname" label="员工姓名" width="150">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="100"> </el-table-column>
      <el-table-column prop="work" label="工作任务" width="140">
      </el-table-column>
      <el-table-column prop="telephone" label="手机号" width="150">
      </el-table-column>
      <el-table-column prop="idcard" label="身份证号"> </el-table-column>
      <el-table-column prop="job" label="权限"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small"
            >编辑</el-button
          >
          <el-button
            @click="handleDelect(scope.row.id)"
            type="danger"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 分页 -->
    <template>
      <pagination
        :total= this.total
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="fetchData"
      />
    </template>
    <!-- 分页结束 -->
    <!-- 模态框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <p>
        员工姓名：<el-input
          v-model="waiter_info.realname"
          placeholder="请输入内容"
        ></el-input>
      </p>
      <!-- <p>密码：<el-input type="password" :rules="loginRules" v-model="waiter_info.password" placeholder="请输入内容"></el-input></p> -->
      <p>
        年龄：<el-input
          v-model="waiter_info.age"
          placeholder="请输入内容"
        ></el-input>
      </p>
      <p>
        工作任务：<el-input
          v-model="waiter_info.work"
          placeholder="请输入内容"
        ></el-input>
      </p>
      <p>
        权限：<el-input
          v-model="waiter_info.job"
          placeholder="请输入内容"
        ></el-input>
      </p>
      <p>
        电话：
        <el-input
          v-model="waiter_info.telephone"
          placeholder="请输入11位手机号"
          @change="confirmTelephone"
        >
        </el-input>
      </p>
      <p>
        身份证号：
        <el-input  v-model="waiter_info.idcard" placeholder="请输入18位身份证号">
        </el-input>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
    <!-- /模态框 -->
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Pagination from "@/components/Pagination";
export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      total:5,
      listLoading: false,
      loginRules: [
        { min: 6, max: 20, message: "密码长度6-20字符", trigger: "blur" },
      ],
    };
  },
  computed: {
    ...mapState("waiters", [
      "list",
      "title",
      "dialogVisible",
      "waiter_info",
      "listQuery",
    ]),
  },
  created() {
    this.fetchData();
  },
  methods: {
    ...mapActions("waiters", [
      "fetchData",
      "handleAdd",
      "fuzzyQuery",
      "handleClose",
      "handleSave",
      "handleClick",
      "handleDelect",
    ]),
    confirmTelephone() {
      if (!/^1[0-9]{10}$/.test(this.waiter_info.telephone)) {
        alert("请输入正确的手机号!");
        this.waiter_info.telephone = "";
      }
    },
    fuQuery() {
      this.fuzzyQuery({
        page: 1,
        pageSize: 10,
        name: this.waiter_info.realname,
      });
    },
  },
};
</script>
<style>
#app-container {
  padding: 20px;
}
.btn {
  margin: 10px;
}
.Top {
  display: flex;
  justify-content: space-between;
}
</style>